<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        body {
            font-family: "Microsoft YaHei", sans-serif;
            background: #f0f2f5;
        }
        .container {
            max-width: 400px;
            margin: 50px auto;
            padding: 30px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .form-group {
            margin-bottom: 20px;
        }
        label {
            display: block;
            margin-bottom: 8px;
            color: #333;
            font-weight: 500;
        }
        input, select, textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid #d9d9d9;
            border-radius: 4px;
            box-sizing: border-box;
        }
        button {
            width: 100%;
            padding: 12px;
            background: #1890ff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background 0.3s;
        }
        button:hover {
            background: #096dd9;
        }
        .error-msg {
            color: #ff4d4f;
            font-size: 0.9em;
            margin-top: 4px;
            height: 18px;
        }
        .extra-links {
            margin-top: 20px;
            text-align: center;
        }
        .extra-links a {
            color: #666;
            text-decoration: none;
            margin: 0 10px;
        }
        .role-options {
            margin-bottom: 20px;
        }
        .role-option {
            margin-bottom: 10px;
        }
        .role-option input[type="radio"] {
            margin-right: 8px;
            width: auto;
        }
        .role-specific {
            display: none;
            margin-top: 15px;
            padding: 15px;
            background: #f9f9f9;
            border-radius: 4px;
        }
        textarea {
            min-height: 100px;
            resize: vertical;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2 style="text-align: center; margin-bottom: 30px;">用户注册</h2>
        <form id="registerForm">
            <div class="form-group">
                <label>用户名</label>
                <input type="text" id="username" placeholder="请输入用户名" required>
                <div class="error-msg" id="usernameError"></div>
            </div>
            
            <div class="form-group">
                <label>密码</label>
                <div style="position: relative;">
                    <input type="password" id="password" placeholder="请输入密码" required>
                    <span id="togglePassword" style="position: absolute; right: 10px; top: 10px; cursor: pointer; user-select: none;">
                        👁️
                    </span>
                </div>
                <div class="error-msg" id="passwordError"></div>
            </div>
            
            <div class="form-group">
                <label>姓名</label>
                <input type="text" id="name" placeholder="请输入真实姓名" required>
                <div class="error-msg" id="nameError"></div>
            </div>
            
            <div class="form-group">
                <label>手机号</label>
                <input type="tel" id="phone" placeholder="请输入手机号码" required>
                <div class="error-msg" id="phoneError"></div>
            </div>
            
            <div class="form-group">
                <label>注册角色</label>
                <div class="role-options">
                    <div class="role-option">
                        <input type="radio" name="role" value="student" id="role-student" checked>
                        <label for="role-student" style="display: inline; font-weight: normal;">学员</label>
                    </div>
                    <div class="role-option">
                        <input type="radio" name="role" value="coach" id="role-coach">
                        <label for="role-coach" style="display: inline; font-weight: normal;">教练</label>
                    </div>
                    <div class="role-option">
                        <input type="radio" name="role" value="organization" id="role-org">
                        <label for="role-org" style="display: inline; font-weight: normal;">机构</label>
                    </div>
                    <div class="role-option">
                        <input type="radio" name="role" value="admin" id="role-admin">
                        <label for="role-admin" style="display: inline; font-weight: normal;">管理员</label>
                    </div>
                </div>
            </div>
            
            <!-- 教练特有字段 -->
            <div id="coachFields" class="role-specific">
                <div class="form-group">
                    <label for="course">课程类型</label>
                    <input type="text" id="course">
                </div>
                <div class="form-group">
                    <label for="coachLicense">教练证号</label>
                    <input type="text" id="coachLicense">
                </div>
                <div class="form-group">
                    <label for="experience">教学经验</label>
                    <textarea id="experience"></textarea>
                </div>
            </div>
            
            <!-- 机构特有字段 -->
            <div id="organizationFields" class="role-specific">
                <div class="form-group">
                    <label for="organization">机构名称</label>
                    <input type="text" id="organization">
                </div>
            </div>
            
            <!-- 管理员特有字段 -->
            <div id="adminFields" class="role-specific">
                <div class="form-group">
                    <label for="adminCode">管理员码</label>
                    <input type="text" id="adminCode">
                </div>
            </div>
            
            <button type="submit">注册</button>
            
            <div class="extra-links">
                <a href="/xwy/denglu">已有账号？去登录</a>
            </div>
        </form>
    </div>

    <script>
        $(function () {
            // 根据角色显示/隐藏相应字段
            $("input[name='role']").change(function() {
                $(".role-specific").hide();
                var role = $(this).val();
                if (role === "coach") {
                    $("#coachFields").show();
                } else if (role === "organization") {
                    $("#organizationFields").show();
                } else if (role === "admin") {
                    $("#adminFields").show();
                }
            });

            // 检查用户名是否可用
            $("#username").blur(function() {
                var username = $(this).val();
                if (username) {
                    $.ajax({
                        url: "/xwy/register/check-username",
                        type: "GET",
                        data: { username: username },
                        success: function(response) {
                            if (!response.available) {
                                $("#usernameError").text("用户名已存在").show();
                            } else {
                                $("#usernameError").hide();
                            }
                        }
                    });
                }
            });
            
            // 检查手机号是否可用
            $("#phone").blur(function() {
                var phone = $(this).val();
                if (phone) {
                    $.ajax({
                        url: "/xwy/register/check-phone",
                        type: "GET",
                        data: { phone: phone },
                        success: function(response) {
                            if (!response.available) {
                                $("#phoneError").text("手机号已注册").show();
                            } else {
                                $("#phoneError").hide();
                            }
                        }
                    });
                }
            });
            
            // 表单提交
            $("#registerForm").submit(function (e) {
                e.preventDefault();
                
                // 获取表单数据
                var formData = {
                    username: $("#username").val(),
                    password: $("#password").val(),
                    name: $("#name").val(),
                    phone: $("#phone").val(),
                    role: $("input[name='role']:checked").val()
                };
                
                // 根据角色添加额外字段
                if (formData.role === "coach") {
                    formData.course = $("#course").val();
                    formData.coachLicense = $("#coachLicense").val();
                    formData.experience = $("#experience").val();
                } else if (formData.role === "organization") {
                    formData.organization = $("#organization").val();
                } else if (formData.role === "admin") {
                    formData.adminCode = $("#adminCode").val();
                }
                
                // 发送注册请求
                $.ajax({
                    url: "/xwy/register/submit",
                    type: "POST",
                    contentType: "application/json",
                    data: JSON.stringify(formData),
                    success: function (response) {
                        if (response.success) {
                            // 显示成功消息
                            const successMsg = document.createElement('div');
                            successMsg.style.color = '#52c41a';
                            successMsg.style.textAlign = 'center';
                            successMsg.style.padding = '10px';
                            successMsg.style.marginTop = '10px';
                            successMsg.textContent = '注册成功，正在跳转到登录页面...';
                            document.getElementById('registerForm').appendChild(successMsg);
                            
                            // 延迟跳转
                            setTimeout(() => {
                                window.location.href = "/xwy/denglu";
                            }, 1500);
                        } else {
                            alert(response.message);
                        }
                    },
                    error: function (xhr, status, error) {
                        console.error("注册请求错误:", xhr.status, xhr.responseText);
                        if (xhr.responseJSON && xhr.responseJSON.message) {
                            alert("注册失败: " + xhr.responseJSON.message);
                        } else {
                            alert("注册失败，请稍后重试。错误状态: " + xhr.status);
                        }
                    }
                });
            });
        });
    </script>
</body>
</html>